<script>
import {
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  nextTick,
  toRefs,
  watch,
  computed,
} from "vue";
import img1 from "@/assets/img/needle-ip6.png";
import img2 from "@/assets/img/circle.png";
import { useStore } from "vuex";
export default {
  props: ["pause", "durationTime", "CurrentTime", "currentPlayRate"],
  setup(props, { emit }) {
    const store = useStore();
    const { proxy } = getCurrentInstance();
    const appHeigth = ref();
    const SongId = ref(0);
    const { pause, durationTime, CurrentTime, currentPlayRate } = toRefs(props);
    let lyricIndex = ref(0);
    const playOn = ref(true);
    const playClass = ref(true);
    const rotating = ref();
    const songScroll = ref(null);
    const obj = reactive({
      sliderWidth: currentPlayRate,
      backgroundImage: "",
      name: "",
      songsname: "你好",
      durationTime: durationTime || "00:00",
      CurrentTime: CurrentTime || "00:00",
      lyricOf: true,
      lyric: "",
    });
    // 监听歌曲id
    let CurSongId = computed(() => {
      return store.state.songid;
    });
    watch([pause, CurSongId, CurrentTime], (newVal, oldVal) => {
      SongId.value = newVal[1];
      playOn.value = newVal[0];
      playClass.value = newVal[0];
      if (!newVal[0]) {
        rotating.value.classList.add("animate");
      } else {
        rotating.value.classList.remove("animate");
      }
      if (newVal[1] != oldVal[1]) {
        getSong();
      }
      // 滚动
      for (let i = 0; i < obj.lyric.length; i++) {
        if (timeToMinute(obj.CurrentTime) == obj.lyric[i].timenum) {
          lyricIndex.value = i;
          const songTop =
            document.getElementsByClassName("p_" + i)[0].offsetTop - 100;
          songScroll.value.style.transform = `translateY(-${songTop}px)`;
          songScroll.value.style.transition = "all 1s";
        }
      }
    });
    // 获取歌曲信息
    const getSong = () => {
      if (SongId.value == 0) return;
      proxy.$http
        .get(`${proxy.$api}/song/detail?ids=${SongId.value}`)
        .then((res) => {
          if (res.status === 200) {
            obj.backgroundImage = res.data.songs[0].al.picUrl;
            obj.name = res.data.songs[0].name;
            obj.songsname = res.data.songs[0].ar[0].name;
          }
        });
      // 歌词
      proxy.$http
        .get(`${proxy.$api}/lyric?id=${SongId.value}`)
        .then((res) => {
          let data = res.data.lrc.lyric.split(/\n/gis);
          data.length = data.length - 1;
          let content = data.map((ele) => {
            return {
              timenum: ele.slice(1, 6),
              min: ele.slice(1, 3),
              second: ele.slice(4, 6),
              mill: ele.slice(7, 10),
              time:
                parseInt(ele.slice(7, 10)) +
                parseInt(ele.slice(4, 6)) * 1000 +
                parseInt(ele.slice(1, 3)) * 60 * 1000,
              content: ele.slice(11),
            };
          });
          content.forEach((item, i) => {
            if (i == 0) {
              item.pre = 0;
            } else {
              item.pre = content[i - 1].time;
            }
          });
          obj.lyric = content;
        });
    };
    // 转为时分秒
    const timeToMinute = (times) => {
      var t = "";
      if (times > -1) {
        var hour = Math.floor(times / 3600);
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        // if(hour < 10) {
        //     t = '0'+ hour + ":";
        // } else {
        //     t = hour + ":";
        // }

        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    };
    // 播放、暂定
    const playClick = () => {
      playClass.value = !playClass.value;
      emit("pauseNew", { data: playClass.value });
    };
    // 返回
    const downClick = () => {
      emit("showBottomNew", { data: false });
    };
    onMounted(() => {
      nextTick(() => {
        appHeigth.value = document.body.clientHeight;
      });
      SongId.value = store.state.songid;
      getSong();
    });
    return {
      lyricIndex,
      songScroll,
      img1,
      img2,
      appHeigth,
      obj,
      playOn,
      playClass,
      rotating,
      playClick,
      downClick,
      timeToMinute,
    };
  },
};
</script>
<template>
  <div
    class="app"
    :style="{
      height: appHeigth + 'px',
    }"
  >
    <div
      class="appbj"
      :style="{
        'background-image': 'url(' + obj.backgroundImage + ')',
      }"
    ></div>
    <div class="top">
      <div class="left">
        <van-icon name="arrow-down" size="18" color="#fff" @click="downClick" />
      </div>
      <div class="text">
        <van-notice-bar
          scrollable
          :text="obj.name"
          color="#fff"
          background="rgba(225,225,225,0)"
        />
        <div class="songsname">{{ obj.songsname }}</div>
      </div>
      <div class="right">
        <van-icon name="share" size="18" color="#fff" />
      </div>
    </div>
    <div class="content">
      <div
        class="conimg"
        v-show="obj.lyricOf"
        @click="obj.lyricOf = !obj.lyricOf"
      >
        <img
          src=""
          alt=""
          class="img1"
          v-lazy="img1"
          :class="playClass == true ? 'active' : ''"
        />
        <img src="" alt="" class="img2" v-lazy="img2" />
        <img class="img3" :src="obj.backgroundImage" alt="" ref="rotating" />
      </div>
      <!-- 歌词 -->
      <div
        class="lyricText"
        v-show="!obj.lyricOf"
        @click="obj.lyricOf = !obj.lyricOf"
      >
        <div class="scroll-lrc" ref="songScroll">
          <p
            v-for="(item, index) in obj.lyric"
            :key="index"
            :class="[lyricIndex === index ? 'active' : '', 'p_' + index]"
            :data-id="item.second"
          >
            {{ item.content.length == 0 ? "～～～" : item.content }}
          </p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="time">
        <span class="process size">{{
          timeToMinute(obj.CurrentTime).length == 0
            ? "00:00"
            : timeToMinute(obj.CurrentTime)
        }}</span>
        <!-- 播放时间 -->
        <div class="slider">
          <van-slider
            v-model="obj.sliderWidth"
            :step="obj.sliderWidth"
            button-size="5px"
          />
        </div>
        <!-- 总时间 -->
        <span class="Totaltime size">{{
          timeToMinute(obj.durationTime) == 0
            ? "00:00"
            : timeToMinute(obj.durationTime)
        }}</span>
      </div>
      <div class="switch">
        <!-- 上一首 -->
        <div class="PreviousSong">
          <span class="iconfont">&#xe78a;</span>
        </div>
        <div class="play" @click="playClick">
          <van-icon
            :name="playOn == true ? 'play' : 'pause'"
            color="#fff"
            size="22"
          />
        </div>
        <!-- 下一首 -->
        <div class="NextSong">
          <span class="iconfont">&#xe7a5;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@keyframes rotating {
  100% {
    transform: rotate(360deg);
  }
}
.animate {
  animation: rotating 10s infinite linear;
}
.app {
  width: 100%;
  position: relative;
  background: #000;
  overflow: hidden;
  .appbj {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: auto 100%;
    background-position: center;
    filter: blur(55px);
  }
  .top {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      width: 45%;
      .songsname {
        font-size: 12px;
        color: #fff;
        text-align: center;
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    .conimg {
      position: relative;
      width: 100%;
      height: 100%;
      .img1 {
        width: 150px;
        position: absolute;
        left: 50%;
        transform: rotate(10deg);
        transform-origin: 0.3rem 0;
        transition: all 1s;
        z-index: 100;
        &.active {
          transform: rotate(-8deg);
        }
      }
      .img2 {
        width: 250px;
        height: auto;
        position: absolute;
        left: 50%;
        top: 135px;
        transform: translateX(-50%);
        z-index: 10;
      }
      .img3 {
        width: 157px;
        height: 157px;
        position: absolute;
        border-radius: 50%;
        top: 182px;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
  .lyricText {
    width: 100%;
    height: 60%;
    position: relative;
    overflow: scroll;
    .scroll-lrc {
      width: 90%;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      overflow: hidden;
      overflow: hidden;
      p {
        width: 60%;
        text-align: center;
        color: rgb(206, 206, 206);
        font-size: 12px;
        font-weight: 600;
        margin: 3px auto;
        letter-spacing: 1.3px;
        line-height: 30px;
        transform: scale(0.9);
      }
      p.active {
        color: #fff;
        transform: scale(1.1);
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
    .time {
      display: flex;
      align-items: center;
      padding: 0 10px;
      .slider {
        flex: 1;
        margin: 0 10px;
      }
      .size {
        font-size: 12px;
        color: #fff;
      }
    }
    .switch {
      display: flex;
      justify-content: center;
      align-items: center;
      .play {
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1.7px solid #fff;
        border-radius: 50%;
        margin: 0 10px;
      }
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
</style>